<template>
	<view class="tabs-scroll flex flex-space-between">
		<view 
			class="flex flex-center font32 color-b3 flex-column" 
			v-for="(item, index) in list" 
			:key="index"
			:class="[tabIndex == index ? 'active':'']"
			@click="handlerTab(index)"
		>
			{{ item.label }}
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';  
	const tabIndex = ref(0)
	const props = defineProps({
		list: {
			type: [Object,Array],
			default: []
		}
	})
	function handlerTab (e) {
		this.tabIndex = e;
	}
</script>

<style lang="scss" scoped>
	.tabs-scroll {
		overflow-x: scroll;
		padding: 16rpx 30rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
		.active {
			font-weight: 500;
			color: #3FA897;
		}
		.active::after {
			width: 40rpx;
			height: 6rpx;
			background: #3FA897;
			border-radius: 3rpx;
			content: '';
			position: absolute;
			bottom: 0;
		}
	}
</style>
